<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="header">
			<text class="title">确认订单</text>
			<view class="time-indicator">{{ currentTime }}</view>
		</view>

		<!-- 电影信息 -->
		<view class="movie-card">
			<text class="movie-title">哪吒之魔童闹海</text>
			<view class="session-info">
				<text>今天02月18日 15:35-17:59 国语2D</text>
			</view>
			<view class="cinema-info">
				<text>百丽宫影城（恒隆广场店）</text>
				<text>7号厅 默认区域 1排1座</text>
			</view>
			<view class="price-info">
				<text>1张 原价</text>
				<text class="original-price">￥46</text>
			</view>
		</view>

		<!-- 退票政策 -->
		<view class="refund-policy">
			<view class="policy-header">
				<text class="warning">已过退票时间</text>
				<text class="action">限时改签</text>
			</view>
			<text class="detail">查看详情</text>
		</view>

		<!-- 影城卡 -->
		<view class="card-section">
			<view class="section-header">
				<text>影城卡</text>
				<text class="tips">开卡享优惠，数量有限，先到先得~</text>
			</view>
			<view class="card-item active">
				<text class="card-title">百老汇通用季卡</text>
				<text class="card-detail">影城卡详情 ></text>
				<view class="card-price">
					<text class="discount">本单立减￥3</text>
					<text class="price">￥15</text>
				</view>
			</view>
		</view>

		<!-- 影城券包 -->
		<view class="coupon-section">
			<view class="section-header">
				<text>影城券包</text>
				<text class="tips">影片券*4[赠10元外卖神券包] [3折]</text>
			</view>
			<view class="coupon-item">
				<text class="discount">本单可再减5元</text>
				<view class="price-info">
					<text class="original-price">￥20</text>
					<text class="discount-price">6.9</text>
				</view>
			</view>
		</view>

		<!-- 订单优惠 -->
		<view class="discount-section">
			<view class="section-header">
				<text>订单优惠</text>
				<text class="tips">影票活动与优惠券</text>
			</view>
			<view class="discount-item disabled">
				<text>猫享卡</text>
				<text class="action">去绑卡</text>
			</view>
			<view class="discount-item disabled">
				<text>观影卡</text>
				<text class="action">去使用</text>
			</view>
		</view>

		<!-- 手机号 -->
		<view class="phone-section">
			<text class="label">手机号</text>
			<text class="tips">仅用于生成订单，取票码不再通过短信发送</text>
			<view class="phone-number">
				<text>152****9106</text>
			</view>
		</view>

		<!-- 底部支付 -->
		<view class="payment-footer">
			<view class="price-summary">
				<text>￥46</text>
				<text class="detail">明细</text>
			</view>
			<button class="pay-button" @click="handlePayment">确认支付</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	const currentTime = ref('13:48');

	const handlePayment = () => {
		uni.showLoading({
			title: '支付中...'
		});
		setTimeout(() => {
			uni.hideLoading();
			uni.navigateTo({
				url: '/pages/payment/success'
			});
		}, 2000);
	};
	// 在script中补充以下功能
	const coupons = ref([{
			id: 1,
			name: '季度卡',
			discount: 3,
			price: 15
		},
		{
			id: 2,
			name: '影城券包',
			discount: 5,
			price: 6.9
		}
	]);

	const selectedCoupon = ref(null);

	const selectCoupon = (coupon) => {
		selectedCoupon.value = coupon;
	};

	const totalPrice = computed(() => {
		let price = 46;
		if (selectedCoupon.value) {
			price -= selectedCoupon.value.discount;
		}
		return Math.max(price, 0);
	});
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;
		}

		.time-indicator {
			color: #666;
			font-size: 28rpx;
		}
	}

	.movie-card {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;

		.movie-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.session-info {
			color: #666;
			margin-bottom: 15rpx;
		}

		.cinema-info {
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			color: #999;
			margin-bottom: 20rpx;
		}

		.price-info {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.original-price {
				color: #e4393c;
				font-weight: bold;
			}
		}
	}

	.refund-policy {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;

		.policy-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.warning {
				color: #e4393c;
			}

			.action {
				color: #007aff;
			}
		}

		.detail {
			color: #007aff;
			font-size: 28rpx;
		}
	}

	.card-section,
	.coupon-section,
	.discount-section {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.tips {
				color: #666;
				font-size: 24rpx;
			}
		}
	}

	.card-item {
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;

		&.active {
			border: 2rpx solid #007aff;
		}

		.card-title {
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.card-detail {
			color: #007aff;
			font-size: 24rpx;
		}

		.card-price {
			margin-top: 15rpx;
			display: flex;
			justify-content: space-between;

			.discount {
				color: #e4393c;
			}

			.price {
				font-weight: bold;
			}
		}
	}

	.coupon-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;

		.price-info {
			display: flex;
			align-items: baseline;

			.original-price {
				color: #999;
				text-decoration: line-through;
				margin-right: 10rpx;
			}

			.discount-price {
				color: #e4393c;
				font-size: 36rpx;
			}
		}
	}

	.discount-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;

		&.disabled {
			color: #999;

			.action {
				color: #007aff;
			}
		}
	}

	.phone-section {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 16rpx;

		.label {
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.tips {
			color: #666;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}

		.phone-number {
			color: #007aff;
			font-size: 32rpx;
		}
	}

	.payment-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);

		.price-summary {
			display: flex;
			align-items: baseline;

			text {
				font-size: 40rpx;
				color: #e4393c;
				font-weight: bold;
			}

			.detail {
				color: #007aff;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}

		.pay-button {
			background-color: #e4393c;
			color: #fff;
			border-radius: 50rpx;
			padding: 20rpx 60rpx;
			font-size: 32rpx;
		}
	}
</style>